/**
 * Created by FreezeSoul on 2017/8/22.
 */
'use strict';
define([
    "app/core/base",
    "app/core/util",
    "../commonMeta",
    "jquery",
    "underscore",
    'JSONParse',
    'loglevel',
    'jqueryccslider'
], function (Chart, Util, Meta, $, _, JSON, log) {

    var effects = [
        {
            value: '{"effect": "cubeUp","slices": 9}',
            text: '效果1'
        }, {
            value: '{"effect": "cubeDown","slices": 9}',
            text: '效果2'
        }, {
            value: '{"effect": "cubeRight","slices": 9}',
            text: '效果3'
        }, {
            value: '{"effect": "cubeLeft","slices": 9}',
            text: '效果4'
        }, {
            value: '{"effect": "flipUp", "slices": 9}',
            text: '效果5'
        }, {
            value: '{"effect": "flipDown", "slices": 9}',
            text: '效果6'
        }, {
            value: '{"effect": "flipRight", "slices": 9}',
            text: '效果7'
        }, {
            value: '{"effect": "flipLeft", "slices": 9}',
            text: '效果8'
        }, {
            value: '{"effect": "blindsVertical", "slices": 9}',
            text: '效果9'
        }, {
            value: '{"effect": "blindsHorizontal", "slices": 9}',
            text: '效果10'
        }, {
            value: '{"effect": "gridBlocksUp", "slices": 9}',
            text: '效果11'
        }, {
            value: '{"effect": "gridBlocksDown", "slices": 9}',
            text: '效果12'
        }, {
            value: '{"effect": "gridBlocksLeft", "slices": 9}',
            text: '效果13'
        }, {
            value: '{"effect": "gridBlocksRight", "slices": 9}',
            text: '效果14'
        }
    ];

    var property = {
        config: "property",
        option: [
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_I',
                name: '图片资源I',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_I',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_EFFECT_I',
                name: '切换效果I',
                enable: false,
                type: 'select',
                value: '',
                default: '',
                data: $.extend(true, [], effects),
                link: 'effect_I',
                tooltip: '设置图片切换效果'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_II',
                name: '图片资源II',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_II',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_EFFECT_II',
                name: '切换效果II',
                enable: false,
                type: 'select',
                value: '',
                default: '',
                data: $.extend(true, [], effects),
                link: 'effect_II',
                tooltip: '设置图片切换效果'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_III',
                name: '图片资源III',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_III',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_EFFECT_III',
                name: '切换效果III',
                enable: false,
                type: 'select',
                value: '',
                default: '',
                data: $.extend(true, [], effects),
                link: 'effect_III',
                tooltip: '设置图片切换效果'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_IV',
                name: '图片资源IV',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_IV',
                tooltip: '设置图片的资源路径'
            }, {
                group: '基础',
                id: 'J_IMAGE_EFFECT_IV',
                name: '切换效果IV',
                enable: false,
                type: 'select',
                value: '',
                default: '',
                data: $.extend(true, [], effects),
                link: 'effect_IV',
                tooltip: '设置图片切换效果'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_V',
                name: '图片资源V',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_V',
                tooltip: '设置图片的资源路径'
            }, {
                group: '基础',
                id: 'J_IMAGE_EFFECT_V',
                name: '切换效果V',
                enable: false,
                type: 'select',
                value: '',
                default: '',
                data: $.extend(true, [], effects),
                link: 'effect_V',
                tooltip: '设置图片切换效果'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_VI',
                name: '图片资源VI',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_VI',
                tooltip: '设置图片的资源路径'
            }, {
                group: '基础',
                id: 'J_IMAGE_EFFECT_VI',
                name: '切换效果VI',
                enable: false,
                type: 'select',
                value: '',
                default: '',
                data: $.extend(true, [], effects),
                link: 'effect_VI',
                tooltip: '设置图片切换效果'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_VII',
                name: '图片资源VII',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_VII',
                tooltip: '设置图片的资源路径'
            }, {
                group: '基础',
                id: 'J_IMAGE_EFFECT_VII',
                name: '切换效果VII',
                enable: false,
                type: 'select',
                value: '',
                default: '',
                data: $.extend(true, [], effects),
                link: 'effect_VII',
                tooltip: '设置图片切换效果'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_VIII',
                name: '图片资源VIII',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_VIII',
                tooltip: '设置图片的资源路径'
            }, {
                group: '基础',
                id: 'J_IMAGE_EFFECT_VIII',
                name: '切换效果VIII',
                enable: false,
                type: 'select',
                value: '',
                default: '',
                data: $.extend(true, [], effects),
                link: 'effect_VIII',
                tooltip: '设置图片切换效果'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_IX',
                name: '图片资源IX',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_IX',
                tooltip: '设置图片的资源路径'
            }, {
                group: '基础',
                id: 'J_IMAGE_EFFECT_IX',
                name: '切换效果IX',
                enable: false,
                type: 'select',
                value: '',
                default: '',
                data: $.extend(true, [], effects),
                link: 'effect_IX',
                tooltip: '设置图片切换效果'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_X',
                name: '图片资源X',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_X',
                tooltip: '设置图片的资源路径'
            }, {
                group: '基础',
                id: 'J_IMAGE_EFFECT_X',
                name: '切换效果X',
                enable: false,
                type: 'select',
                value: '',
                default: '',
                data: $.extend(true, [], effects),
                link: 'effect_X',
                tooltip: '设置图片切换效果'
            },
            {
                group: '事件',
                id: 'ImageClickJsEval',
                name: '点击执行脚本',
                enable: false,
                type: 'script',
                value: '',
                default: '',
                link: 'clickScript',
                tooltip: '点击执行脚本，可定制复杂的JS操作'
            }
        ].concat($.extend(true, [], Meta.commonProperties)),
        MapOption: function (option) {
            Util.linkOption(this.option, option);
        }
    };

    var ccslider = Chart.extend({
        constructor: function (layout) {
            this._layout = layout;
            this._element = null;
            this._container = null;
            this._ccslider = null;
            this._ccsliderId = 'ccslider_' + Util.newUUID();
            this._currentIndex = null;
            this._option = {
                Binding: [],
                Events: [],
                Extend: $.extend(true, {}, property),
                Option: {
                    uuid: '',
                    class: '',
                    display: true,
                    imageUrl_I: "",
                    imageUrl_II: "",
                    imageUrl_III: "",
                    imageUrl_IV: "",
                    imageUrl_V: "",
                    imageUrl_VI: "",
                    imageUrl_VII: "",
                    imageUrl_VIII: "",
                    imageUrl_IX: "",
                    imageUrl_X: "",
                    effect_I: "",
                    effect_II: "",
                    effect_III: "",
                    effect_IV: "",
                    effect_V: "",
                    effect_VI: "",
                    effect_VII: "",
                    effect_VIII: "",
                    effect_IX: "",
                    effect_X: "",
                    clickScript: '',
                    initScript: '',
                    disposeScript: ''
                }
            };
        },
        init: function (element) {
            try {
                this._container = element;
            } catch (e) {
                log.error(e);
            }
        },
        _render: function () {
            if (this._ccslider) {
                this._ccslider.destroy();
            }
            $(this._container).empty();
            var _this = this;
            var htmlStr = '<div id="slider' + this._ccsliderId + '" style="width: 100%;height: 100%;">';
            var rootPath = "static/resource/";
            var imagePathArray = [
                this._option.Option.imageUrl_I,
                this._option.Option.imageUrl_II,
                this._option.Option.imageUrl_III,
                this._option.Option.imageUrl_IV,
                this._option.Option.imageUrl_V,
                this._option.Option.imageUrl_VI,
                this._option.Option.imageUrl_VII,
                this._option.Option.imageUrl_VIII,
                this._option.Option.imageUrl_IX,
                this._option.Option.imageUrl_X
            ];
            var effectArray = [
                this._option.Option.effect_I,
                this._option.Option.effect_II,
                this._option.Option.effect_III,
                this._option.Option.effect_IV,
                this._option.Option.effect_V,
                this._option.Option.effect_VI,
                this._option.Option.effect_VII,
                this._option.Option.effect_VIII,
                this._option.Option.effect_IX,
                this._option.Option.effect_X
            ];
            $.each(imagePathArray, function (i, path) {
                if (path) {
                    var imageUrl = adConfig.baseServiceUrl + rootPath + path;
                    var $imageEl = $('<img style="visibility: hidden;" class="ccslider_img" data-index="' + (i + 1) + '" src="' + imageUrl + '" alt=""/>');
                    if (effectArray[i]) {
                        $imageEl.attr("data-transition", effectArray[i]);
                    }
                    htmlStr += $imageEl[0].outerHTML;
                }
            });
            htmlStr += '<img class="ccslider_loading" src="app/plugins/controls/common/ccslider/images/loading.gif" style="position:absolute;left:50%;top:50%;width:64px;height:64px;margin-top:-32px;margin-left:-32px;"/>';
            htmlStr += '</div>';
            var $element = $(htmlStr);
            $element.appendTo($(this._container));

            $element.find("img.ccslider_img").first().one("load", function () {
                $element.find("img.ccslider_loading").remove();
                $element.find("img.ccslider_img").each(function () {
                    $(this).css({"visibility": "visible"});
                });
                $element.ccslider({
                    _3dOptions: {
                        makeShadow: false,
                        imageWidth: $(_this._container).width(),
                        imageHeight: $(_this._container).height()
                    },
                    beforeSlideChange: function (index) {

                    },
                    afterSlideChange: function (index) {
                        _this._currentIndex = index + 1;
                    }
                });
                _this._ccslider = $element.data("ccslider");
                $element.find("canvas").on("click", function (e) {
                    if (_this._option.Option
                        && _this._option.Option.clickScript) {
                        Util.evalJavaScript(_this, _this._option.Option.clickScript);
                    }
                });
            });

            //Util.setCommonMeta(this, this._container, this._option.Option);
            //Util.initChartLifeTime(this, this._container, this._option.Option);
            return $element;
        },
        example: function () {
            try {
                this._element = this._render();
            } catch (e) {
                log.error(e);
            }
        },
        _readProperty: function () {
            try {
                if (!this._option.Extend) return;
                Util.deepMapOption(property, this._option.Extend, this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        setData: function (data) {
            try {
                this._readProperty();
                this._element = this._render();
            } catch (e) {
                log.error(e);
            }
        },
        setOption: function (option) {
            try {
                return this._option = $.extend(true, {}, option);
            } catch (e) {
                log.error(e);
            }
        },
        getOption: function () {
            return this._option;
        },
        setTheme: function (theme) {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        resize: function () {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        showLoading: function () {
            try {
                if (this._layout && this._layout.showLoading) {
                    this._layout.showLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        hideLoading: function () {
            try {
                if (this._layout && this._layout.hideLoading) {
                    this._layout.hideLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        dispose: function () {
            try {
                if (this._ccslider)
                    this._ccslider.destroy();
                $(this._element).remove();
                //Util.disposeChartLifeTime(this, this._container, this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        getElement: function () {
            return this._element;
        },
        getChart: function () {
            return this._element;
        }
    });

    return {
        Chart: ccslider,
        Property: property
    };
});